<template>
  <JeepayBackground :bgColorStyle="{ height: '776rpx' }" class="store-wrapper">
    <JeepayCustomNavbar
      textColor="#fff"
      bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)"
      title="门店详情"
      backCtrl="back"
    />
	
	<!--  通用渲染组件 -->
	<JeepayTableListItem viewClass="list-item-by-detail"
	 :title="vdata.record.storeName" :subtitle="vdata.record.storeId" :logo="vdata.record.storeLogo || '/static/indexImg/icon-store.svg'" :moreBtnList="moreBtnList" ref="refTabel"/>
	
    <view class="create-time">
      <view class="time-title">创建时间</view>
      <view class="time-info">{{ vdata.record.createdAt }}</view>
    </view>
	
	<JeepayCard :editText="ak.ent.has('ENT_MCH_STORE_EDIT') ? '修改门店' : null" @editTap="go.to('PAGES_APP_STORE_EDIT', {storeId: vdata.record.storeId})">
		<JeepayDescview>
			<JeepayDescviewItem title="门店名称" :desc="vdata.record.storeName"/>
			<JeepayDescviewItem title="联系人电话" :desc="vdata.record.contactPhone" />
			<JeepayDescviewItem title="门店地址" :desc="vdata.record.address" />
			<JeepayDescviewItem title="蚂蚁店铺">
      <template #desc>
        <JeepayTag type="blue">{{ calcAliStatusText() }}</JeepayTag>
      </template>
      </JeepayDescviewItem>
			<JeepayDescviewItem title="备注" :desc="vdata.record.remark || '未填写'"  :bottomBorder="true" />
			<JeepayDescviewItem title="门店Logo" :desc="vdata.record.storeLogo"  :descIsImg="true"  />
			<JeepayDescviewItem title="门店内景照" :desc="vdata.record.storeInnerImg"  :descIsImg="true" />
			<JeepayDescviewItem title="门头照" :desc="vdata.record.storeOuterImg"  :descIsImg="true"  />
		</JeepayDescview>
	</JeepayCard>
	
	<JeepayCard title="其他设置" viewStyle="margin-top: 30rpx">
		<JeepayTableListItem title="是否默认" subtitle="设为默认后，该门店将成为当前商户的默认下单门店">
			<template #titleRight>
					<!-- 显示条件： 1. 权限支持， 2. 仅支持 非默认 调整为 默认， 反向不支持 -->
				<JeepayStateSwitch v-model:state="vdata.record.defaultFlag" :showSwitchType="ent.has('ENT_MCH_STORE_EDIT') && vdata.record.defaultFlag == 0" :updateStateFunc="updateDefaultFlagFunc"/>
			</template>
		</JeepayTableListItem>
	</JeepayCard>

  </JeepayBackground>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { $location2areacode, reqLoad, API_URL_MCH_STORE_LIST,$queryAliStore,API_URI_DEV_RUYI  } from '@/http/apiManager.js'
import ak from '@/commons/utils/ak.js'
import infoBox from '@/commons/utils/infoBox.js';
import go from '@/commons/utils/go.js'
import formUtil from '@/commons/utils/formUtil.js'
import emit from '@/commons/utils/emit.js'
import ent from '@/commons/utils/ent.js'

const moreBtnList = reactive([
  { label: '删除门店', value: 'delete', color: 'red', entId: "ENT_MCH_STORE_DELETE", confirmText: '确认删除门店？', fun: deleteFunc},
  { label: '同步蚂蚁店铺', value: 'aliStore',  entId: "ENT_MCH_ALIPAY_SHOP_ADD", fun: ()=>{ go.to('PAGES_APP_STORE_EDIT', {storeId: vdata.record.storeId,type:'aliStore',aliStatus:vdata.record.alipayShopStatus}) }},
  { label: '解除蚂蚁店铺', value: 'delAliStore', confirmText: '是否确认解除该蚂蚁店铺同步?',  entId: "ENT_MCH_ALIPAY_SHOP_DELETE", fun: ()=>{  closeAliStore()}},
  { label: '刷新蚂蚁店铺状态', value: 'queryAliStore',  entId: "ENT_MCH_ALIPAY_SHOP_STATUS", fun: ()=>{  queryAliStoreStatus()}},
])

onLoad((options) => {
	refData(options.storeId)
})

const vdata = reactive({
	record : { }
})
const refTabel = ref(null)

// 监听 更新事件 
onUnload(() => uni.$off(emit.ENAME_REF_STORE_DETAIL))
uni.$on(emit.ENAME_REF_STORE_DETAIL, function(data){
		refData(vdata.record.storeId)
})
function refData (storeId) {
  reqLoad.getById(API_URL_MCH_STORE_LIST, storeId).then(({ bizData }) => {
    vdata.record = bizData
    if(bizData.alipayShopStatus !=0){
      queryAliStoreStatus(true)
    }else{
      calcTabelList(bizData.alipayShopStatus)
    }
  })
}
// 针对 列表按钮 处理
const orgTabelArray = []
function calcTabelList (key) {
  const orgTabelArrayIncludesData = (index)=>{
    if (orgTabelArray.findIndex(ite => ite.value == moreBtnList[index].value) == '-1') {
          orgTabelArray.push(moreBtnList[index]) // 存储 列表数据 以便状态更新 时 恢复列表
        }
  } 
  const delValue = ['delAliStore', 'queryAliStore']
  const i = moreBtnList.findIndex(v => v.value == 'aliStore')
  if(i !='-1'){
    moreBtnList[i].label = '同步蚂蚁店铺'
  }
  if (['0', '-1'].includes(key)) {
    const index = delValue.map((v) => moreBtnList.findIndex(ite => ite.value == v)) //筛选出 需要删除的下标
    if (index.length) {
      index.sort((a, b) => b - a) //排序 从大到小
      index.forEach(v => {
        orgTabelArrayIncludesData(v)
        moreBtnList.splice(v, 1)
      })
    }
  } else if(key !='031') {
    const queryIndex = moreBtnList.findIndex(v=>v.value=='queryAliStore')
    if(queryIndex != '-1' && orgTabelArray.findIndex(v=>v.value =='queryAliStore') !='-1'){
      moreBtnList.splice(queryIndex,1)
    }
    moreBtnList.push(...orgTabelArray)
    const i = moreBtnList.findIndex(v => v.value == 'aliStore')
    if (i != '-1') {
      moreBtnList[i].label = '修改蚂蚁店铺'
      moreBtnList.sort((a, b) => a.label.length - b.label.length) //对列表进行排序
    }
  }
  const delIndex = moreBtnList.findIndex(v => v.value == 'delAliStore')
  if (key == '031') {
    if(moreBtnList.findIndex(v=>v.value=='queryAliStore')=='-1'){
      moreBtnList.push(orgTabelArray.find(v=>v.value == 'queryAliStore'))
    }
    if (delIndex != '-1') {
      moreBtnList.splice(delIndex, 1)
    }
    if(i !='-1'){
      orgTabelArrayIncludesData(i)
      moreBtnList.splice(i, 1)
    }
  }
}
function updateDefaultFlagFunc(isDefault){
	return reqLoad.updateById(API_URL_MCH_STORE_LIST, vdata.record.storeId, { defaultFlag: isDefault }).then(() => {
		emit.pageEmit(emit.ENAME_REF_STORE_LIST)
		infoBox.showSuccessToast("修改成功");
	})
}
function deleteFunc(){
	return reqLoad.delById(API_URL_MCH_STORE_LIST, vdata.record.storeId).then(() => {
		infoBox.showSuccessToast("删除成功");
		go.back(1, emit.ENAME_REF_STORE_LIST) // 返回页面 && 更新 
	})
}
const  closeAliStore = ()=>{
    reqLoad.delById(API_URI_DEV_RUYI,vdata.record.storeId).then(res=>{
      infoBox.showSuccessToast("解除成功");
      refData(vdata.record.storeId)
    })
}
const queryAliStoreStatus =(tooast) =>{
  $queryAliStore(vdata.record.storeId).then(({bizData})=>{
    if(bizData){
      vdata.record.alipayShopStatus = bizData.alipayShopStatus
      calcTabelList(bizData.alipayShopStatus)
     if(!tooast){
      infoBox.showToast('刷新蚂蚁店铺状态成功。')
     }
    }
  })
}
// 计算 蚂蚁店铺 状态 文字
const calcAliStatusText =()=>{
  let text = ''
  switch (vdata.record.alipayShopStatus){
    case '0' :
    text = '未同步'
    break
    case '-1': 
    text = '同步失败'
    break
    case '031': 
    text = '已提交审核'
    break
    case '99': 
    text = '已同步'
    break
  }
  return text
}
</script>

<style lang="scss" scoped>
.create-time {
  display: flex;
  justify-content: space-between;
  margin: 0 75rpx;
  padding: 50rpx 0;
  font-size: 30rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
  .time-title {
    color: rgba(255, 255, 255, 0.7);
  }
  .time-info {
    color: #fff;
  }
}
.store-info {
  padding: 0.1rpx;
  margin: 0 35rpx;
  background-color: #fff;
  border-radius: $J-b-r32;
}
.default-img {
  width: 50rpx;
  height: 50rpx;
}
.store-wrapper {
  padding-bottom: 30rpx;
}
</style>
